// import LeftHeaderImg from "@/assets/images/Photo／背景／标题 左@3x.png";
import * as echarts from "echarts";
import dayjs from "dayjs";
import { useEffect, useRef } from "react";
// 导出一个默认函数
export default function index() {
  // 创建一个ref对象，用于获取DOM元素
  const studentRef = useRef(null);
  // 声明一个echarts实例，初始值为null
  let myChart: echarts.EChartsType | null = null;
  // 声明一个WebSocket实例，初始值为null
  let ws = null;
  // useEffect函数，在组件挂载时执行
  useEffect(() => {
    // 初始化echarts实例
    myChart = echarts.init(studentRef.current);
    // 创建WebSocket实例
    ws = new WebSocket("ws://localhost:3000");
    // 监听WebSocket消息
    ws.onmessage = (res) => {
      // 解析WebSocket消息
      const { legendData, nowTime, seriesData } = JSON.parse(res.data);
      // 格式化时间
      const dateTime = [
        dayjs(nowTime - 90000).format("HH:mm:ss"),
        dayjs(nowTime - 60000).format("HH:mm:ss"),
        dayjs(nowTime - 30000).format("HH:mm:ss"),
        dayjs(nowTime).format("HH:mm:ss"),
      ];
      // 构造数据源
      const source: (string | number)[][] = [];
      source.push(["product", ...dateTime]);
      legendData.forEach((item: string, index: number) => {
        source.push([item, ...seriesData[index]]);
      });
      console.log(optionModule(source));
      // 设置echarts实例的配置项
      if (myChart) {
        myChart.setOption(optionModule(source));
      }
    };
  }, []); // 空数组表示只在组件挂载时执行一次
  return (
    <div style={{ width: "100%" }}>
      <div
        style={{
          width: "23vw",
          height: "40vh",
          position: "absolute",
          top: "8vh",
          left: "3.2vw",
        }}
      >
        <div
          style={{
            fontSize: "0.9rem",
            color: "white",
            lineHeight: "26px",
            // backgroundImage: `url(${LeftHeaderImg})`,
            width: "100%",
            backgroundSize: "cover",
            backgroundPosition: "center",
            position: "absolute",
          }}
        ></div>
        <div
          style={{
            width: "100%",
            height: "90%",
            padding: "30px 0",
            marginTop: "30px",
          }}
        >
          <iframe
            src="https://i.tianqi.com/?c=code&id=55&color=%23FFFFFF&bgc=%2300B0F0&bdc=%2300B0F0&icon=5&py=tianjin&site=12"
            frameBorder="0"
            width="100%"
            height="600"
          ></iframe>
        </div>
      </div>
      <div
        style={{
          width: "23vw",
          height: "48vh",
          position: "absolute",
          top: "50vh",
          left: "3.2vw",
        }}
      >
        <div
          style={{
            fontSize: "0.9rem",
            color: "white",
            lineHeight: "26px",
            // backgroundImage: `url(${LeftHeaderImg})`,
            width: "100%",
            backgroundSize: "cover",
            backgroundPosition: "center",
            position: "absolute",
          }}
        ></div>
        <div style={{ width: "100%", height: "90%", padding: "30px 0" }}>
          <div ref={studentRef} style={{ width: "100%", height: "100%" }}></div>
        </div>
      </div>
    </div>
  );
}
